<template>
    <!-- 图片上传输入框 -->
    <div style="display: flex">
        <Poptip trigger="hover" :disabled="noPic" title="图片预览" placement="right" width="350">
            <Input v-model="currentValue" @on-change="handleChange" :placeholder="placeholder" :size="size" :disabled="disabled" :readonly="readonly" :maxlength="maxlength" clearable />
            <div slot="content">
                <img :src="currentValue" style="width: 100%; margin: 0 auto; display: block" />
                <a @click="viewImage = true" style="margin-top: 5px; text-align: right; display: block">查看大图</a>
            </div>
        </Poptip>
        <Upload
            :action="uploadFileUrl"
            :on-success="handleSuccess"
            :on-error="handleError"
            :format="format"
            :accept="accept"
            :max-size="fileSize"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="beforeUpload"
            :show-upload-list="false"
            ref="up"
            class="upload"
        >
            <Button :loading="loading" :size="size" :disabled="disabled" :icon="icon">上传图片</Button>
        </Upload>

        <Modal title="图片预览" v-model="viewImage" :styles="{ top: '30px' }" draggable>
            <img :src="currentValue" style="width: 100%; margin: 0 auto; display: block" />
            <div slot="footer">
                <Button @click="viewImage = false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: 'uploadPicInput',
    props: {
        value: String,
        size: String,
        fileSize: {
            type: Number,
            default: 5120
        },
        placeholder: {
            type: String,
            default: '可输入图片链接'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        readonly: {
            type: Boolean,
            default: false
        },
        maxlength: {
            type: Number,
            default: 1000
        },
        icon: {
            type: String,
            default: 'ios-cloud-upload-outline'
        },
        format: {
            type: Array,
            default: () => ['jpg', 'jpeg', 'png', 'gif', 'bmp']
        },
        uploadFileUrl: {
            type: String
        }
    },
    data() {
        return {
            currentValue: this.value,
            loading: false,
            viewImage: false,

            imgArr: ['jpg', 'jpeg', 'png', 'gif', 'bmp']
        };
    },
    computed: {
        //不是图片
        noPic() {
            if (!this.currentValue) return true;
            let split = this.currentValue.split('.');
            let part = split.length > 1 ? split[1] : '';
            return !this.imgArr.includes(part);
        },
        accept() {
            return this.format.map(item => '.' + item).join(',');
        }
    },
    methods: {
        handleFormatError(file) {
            this.loading = false;
            this.$Notice.warning({
                title: '不支持的文件格式',
                desc: '所选文件‘ ' + file.name + ` ’格式不正确, 请选择 ${this.accept}格式文件`
            });
        },
        handleMaxSize(file) {
            this.loading = false;
            this.$Notice.warning({
                title: '文件大小过大',
                desc: '所选文件‘ ' + file.name + ' ’大小过大, 不得超过 ' + this.fileSize + 'kb'
            });
        },
        beforeUpload() {
            this.loading = true;
            return true;
        },
        handleSuccess(res, file) {
            this.loading = false;
            //res = {result: 'http://p1.meituan.net/wedding/527bd0f0bd0ea54e39f5c2695c11ab75126801.jpg%40watermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20'}
            file.url = `/download?group_name=${res.group_name}&appender_filename=${res.appender_filename}`;
            this.currentValue = file.url;
            this.$emit('input', this.currentValue);
            this.$emit('on-change', this.currentValue);
        },
        handleError(error, file, fileList) {
            this.loading = false;
            console.log('上传错误信息', error.toString());
            // this.$Message.error(error.toString());
            this.$Message.error({
                content: error.toString(),
                duration: 5,
                closable: true
            });
        },
        handleChange(v) {
            this.$emit('input', this.currentValue);
            this.$emit('on-change', this.currentValue);
        },
        setCurrentValue(value) {
            if (value === this.currentValue) {
                return;
            }
            this.currentValue = value;
            this.$emit('on-change', this.currentValue);
        }
    },
    watch: {
        value(val) {
            this.setCurrentValue(val);
        }
    },
    created() {}
};
</script>

<style lang="less">
.upload {
    display: inline-block;
    margin-left: 10px;
}
</style>
